<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>客户流失管理</title>
    <link rel="stylesheet" href="/box/assets/css/style.css">
    <link rel="stylesheet" href="/box/assets/css/loader-style.css">
    <link rel="stylesheet" href="/box/assets/css/bootstrap.css">
    <link rel="stylesheet" href="/box/layui/css/layui.css">
    <script src="/box/js/jquery-3.3.1.js"></script>
    <script src="/box/layui/layui.js"></script>
    <script src="/box/js/config.js"></script>
    <link rel="shortcut icon" href="/box/assets/ico/minus.png">
    <style>
        .box-pad {
            padding: 1%
        }
        #measures, #reason, #detail {
            display: none;
            padding: 30px 50px 0 10px;
        }
        #detail input, #lossForm input, #rLossForm input {
            border: none;
        }
    </style>
</head>

<body style="background: none">
    <div id="measures">
        <form class="layui-form" id="lossForm" lay-filter="lossForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">客户</label>
                    <div class="layui-input-inline">
                        <input type="text" id="mCustomerName" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">客户经理：</label>
                    <div class="layui-inline">
                        <input type="text" id="mUserName" class="layui-input" readonly>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上次下单时间</label>
                <div class="layui-input-block">
                    <input type="text" name="lastTime" class="layui-input" readonly>
                </div>
            </div>
        </form>
        <form class="layui-form" id="measuresForm" lay-filter="measuresForm">
            <input type="hidden" name="lossId" id="measuresId">
            <input type="hidden" name="customerId" id="measuresCustomerId">
            <div class="layui-form-item">
                <label class="layui-form-label">暂缓措施</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入暂缓措施" name="measures" class="layui-textarea"></textarea>
                </div>
            </div>
        </form>
    </div>
    <div id="reason">
        <form class="layui-form" id="rLossForm" lay-filter="rLossForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">客户</label>
                    <div class="layui-input-inline">
                        <input type="text" id="rCustomerName" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">客户经理：</label>
                    <div class="layui-inline">
                        <input type="text" id="rUserName" class="layui-input" readonly>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上次下单时间</label>
                <div class="layui-input-block">
                    <input type="text" name="lastTime" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">暂缓措施</label>
                <div class="layui-input-block">
                    <input type="text" name="measures" class="layui-input" readonly>
                </div>
            </div>
        </form>
        <form class="layui-form" id="reasonForm" lay-filter="reasonForm">
            <input type="hidden" name="lossId" id="reasonId">
            <input type="hidden" name="customerId" id="reasonCustomerId">
            <div class="layui-form-item">
                <label class="layui-form-label">流失原因</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入流失原因" name="reason" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">流失时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="confirmLoss" class="layui-input" id="confirmLoss" readonly>
                </div>
            </div>
        </form>
    </div>
    <div id="detail">
        <form class="layui-form" id="detailForm" lay-filter="detailForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">客户</label>
                    <div class="layui-input-inline">
                        <input type="text" id="dCustomerName" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">客户经理：</label>
                    <div class="layui-inline">
                        <input type="text" id="dUserName" class="layui-input" readonly>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上次下单时间</label>
                <div class="layui-input-block">
                    <input type="text" name="lastTime" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">暂缓措施</label>
                <div class="layui-input-block">
                    <input type="text" name="measures" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">流失时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="confirmLoss" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">流失原因</label>
                <div class="layui-input-block">
                    <input type="text" name="reason" class="layui-input" readonly>
                </div>
            </div>
        </form>
    </div>
    <div class="box-pad">
        <h1>客户流失管理</h1>
        <hr>
        <form class="layui-form" id="topForm" lay-filter="topForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">客户名：</label>
                    <div class="layui-inline">
                        <input type="text" id="customerName" class="layui-input" autocomplete="off">
                    </div>
                </div>
                <button type="button" class="layui-btn" style="margin-bottom: 10px" onclick="selects()">查询</button>
                <button type="button" class="layui-btn" style="margin-left: 20px; margin-bottom: 10px" onclick="add()">添加</button>
            </div>
        </form>
        <table class="layui-table" lay-filter="lossTable" id = "lossTable"></table>
        <script>
            var table;
            layui.use(['table','form'], function (){
                table = layui.table;
                var form = layui.form;
                //  表格渲染
                table.render({
                    elem: '#lossTable'
                    ,url:'http://localhost:8888/loss/list'
                    ,text: {none: '没有查到相关数据'}
                    ,even: true
                    ,page : true
                    ,limit : 10
                    ,cols: [[
                        {field:'lossId', width:60, title: '编号'}
                        ,{field:'eleCustomer', title: '客户名称', templet : function (d) {
                                return d.eleCustomer.customerName;
                            }
                        }
                        ,{field:'eleUser', title: '客户经理', templet : function (d) {
                                return d.eleUser.userName;
                            }
                        }
                        ,{field:'lastTime', title: '上次下单时间'}
                        ,{field:'confirmLoss', title: '确认流失时间'}
                        ,{field:'eleDictionary', title: '状态', templet : function (d) {
                                return d.eleDictionary.entry;
                            }
                        }
                        ,{toolbar:'#barDemo', title: '操作'}
                    ]]
                });
                //  获取时间
                function getNow(s) {
                    return s < 10 ? '0' + s: s;
                }
                function dates() {
                    var now = new Date();
                    //格式化日，如果小于9，前面补0
                    var day = ("0" + now.getDate()).slice(-2);
                    //格式化月，如果小于9，前面补0
                    var month = ("0" + (now.getMonth() + 1)).slice(-2);
                    var h = now.getHours();
                    var minute = now.getMinutes();
                    var s = now.getSeconds();
                    //拼装完整日期格式
                    var today = now.getFullYear()+"-"+(month)+"-"+(day)+" "+getNow(h)+":"+getNow(minute)+":"+getNow(s);
                    return today;
                }
                //  行内按钮事件
                table.on('tool(lossTable)', function (obj) {
                    var data = obj.data;
                    var layEvent = obj.event;
                    if (layEvent === 'measures') {  // 暂缓流失
                        layer.open({
                            type: 1,
                            title: "暂缓流失",
                            //  皮肤
                            skin: "layui-layer-molv",
                            //  动画
                            anim: 0,
                            area: "800px",
                            maxmin: true,
                            content: $("#measures"),
                            btn: ['确定','取消'],
                            success: function () {
                                form.val('lossForm',data);
                                $("#mCustomerName").val(data.eleCustomer.customerName);
                                $("#mUserName").val(data.eleUser.userName);
                                $("#measuresId").val(data.lossId);
                                $("#measuresCustomerId").val(data.customerId);
                            },
                            yes: function () {
                                var str = $("#measuresForm").serialize();
                                $.post(new Config().base_url + "/loss/measures",str, function (das) {
                                    layer.close(layer.index);
                                    table.reload("lossTable");
                                });
                            }
                        })
                    } else if (layEvent === 'reason') {  // 确认流失
                        layer.open({
                            type: 1,
                            title: "确认流失",
                            //  皮肤
                            skin: "layui-layer-molv",
                            //  动画
                            anim: 0,
                            area: "800px",
                            maxmin: true,
                            content: $("#reason"),
                            btn: ['确定','取消'],
                            success: function () {
                                form.val('rLossForm',data);
                                $("#rCustomerName").val(data.eleCustomer.customerName);
                                $("#rUserName").val(data.eleUser.userName);
                                $("#reasonId").val(data.lossId);
                                $("#confirmLoss").val(dates());
                                $("#reasonCustomerId").val(data.customerId);
                            },
                            yes: function () {
                                var str = $("#reasonForm").serialize();
                                $.post(new Config().base_url + "/loss/reason",str, function (das) {
                                    layer.close(layer.index);
                                    table.reload("lossTable");
                                });
                            }
                        })
                    } else if (layEvent === 'detail') {  // 查看
                        layer.open({
                            type: 1,
                            title: "确认流失",
                            //  皮肤
                            skin: "layui-layer-molv",
                            //  动画
                            anim: 0,
                            area: "800px",
                            maxmin: true,
                            content: $("#detail"),
                            btn: ['返回'],
                            success: function () {
                                form.val('detailForm',data);
                                $("#dCustomerName").val(data.eleCustomer.customerName);
                                $("#dUserName").val(data.eleUser.userName);
                            }
                        })
                    }
                });
            });
            function selects(){
                table.reload("lossTable",{
                    page: {
                        curr: 1
                    }
                    ,where: {
                        "eleCustomer.customerName" : $("#customerName").val()
                    }
                });
            }
            function add(){
                $.post(new Config().base_url + "/order/lossCus", function (das) {
                    table.reload("lossTable");
                });
            }
        </script>
        <!--  行内按钮  -->
        <script type="text/html" id="barDemo">
            {{# var datas = JSON.parse(sessionStorage.getItem("login_user"));}}
            {{# if(d.eleCustomer.state != 4){ }}
            {{# layui.each(datas.user_pers, function(index, item){ }}
            {{# if(item.percode == 'loss:update'){ }}
            <a class="layui-btn layui-btn-xs" lay-event="measures" title="暂缓流失"><span class="fontawesome-edit"></span></a>
            {{# } }}
            {{# });}}
            {{# } }}

            {{# if(d.eleCustomer.state == 3){ }}
            {{# layui.each(datas.user_pers, function(index, item){ }}
            {{# if(item.percode == 'loss:update'){ }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reason" title="确认流失"><span class="fontawesome-remove"></span></a>
            {{# } }}
            {{# });}}
            {{# } }}

            {{# if(d.eleCustomer.state == 4){ }}
            {{# layui.each(datas.user_pers, function(index, item){ }}
            {{# if(item.percode == 'loss:query'){ }}
            <a class="layui-btn layui-btn-xs" lay-event="detail" title="查看"><span class="fontawesome-file-alt"></span></a>
            {{# } }}
            {{# });}}
            {{# } }}
        </script>
    </div>
</body>
</html>